<template>
  <div class="layout">
    <!-- 顶部导航栏 -->
    <header class="header">
      <div class="header-container">
        <!-- Logo和标题 -->
        <div class="header-left">
          <router-link to="/" class="logo-link">
            <div class="logo">
              <span class="logo-icon">
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <!-- 手绘工作室图标 -->
                  <path d="M4 4H20V20H4V4Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                  <!-- 工作台 -->
                  <path d="M6 18H18V16H6V18Z" fill="currentColor" opacity="0.3"/>
                  <!-- 画笔 -->
                  <path d="M8 14L12 10L16 14" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" opacity="0.8"/>
                  <!-- 装饰点 -->
                  <circle cx="10" cy="8" r="1" fill="currentColor" opacity="0.6"/>
                  <circle cx="14" cy="12" r="0.8" fill="currentColor" opacity="0.5"/>
                  <path d="M17 7C17.5 6.5 18 7 18 7.5" stroke="currentColor" stroke-width="1" stroke-linecap="round" opacity="0.4"/>
                </svg>
              </span>
              <span class="logo-text">创意工作室</span>
            </div>
          </router-link>
        </div>

        <!-- 主导航菜单 -->
        <nav class="main-nav">
          <div class="nav-menu">
            <router-link
              v-for="item in mainMenuItems"
              :key="item.name"
              :to="item.path"
              class="nav-item"
              :class="{ active: $route.path.startsWith(item.path) }"
            >
              <span class="nav-icon">{{ item.icon }}</span>
              <span class="nav-text">{{ item.label }}</span>
            </router-link>
          </div>
        </nav>

        <!-- 右侧工具栏 -->
        <div class="header-right">
          <!-- 搜索框 -->
          <div class="search-box">
            <input
              v-model="searchQuery"
              @keyup.enter="handleSearch"
              type="text"
              placeholder="搜索内容..."
              class="search-input"
            />
            <button @click="handleSearch" class="search-button">
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <!-- 手绘放大镜 -->
                <circle cx="11" cy="11" r="8" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                <path d="m21 21-4.35-4.35" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                <!-- 装饰光晕 -->
                <circle cx="15" cy="7" r="1.5" fill="currentColor" opacity="0.3"/>
              </svg>
            </button>
          </div>

          <!-- 通知 -->
          <div class="notification-icon" @click="showNotifications = !showNotifications">
            <span class="icon">
              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <!-- 手绘铃铛 -->
                <path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9Z" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
                <path d="M13.73 21a2 2 0 0 1-3.46 0" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
                <!-- 装饰振动线 -->
                <path d="M19 8C19.5 7.5 20 8 20.5 7.5" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" opacity="0.6"/>
                <path d="M21 6C21.5 5.5 22 6 22.5 5.5" stroke="currentColor" stroke-width="1" stroke-linecap="round" opacity="0.4"/>
              </svg>
            </span>
            <span v-if="unreadNotifications > 0" class="notification-badge">
              {{ unreadNotifications }}
            </span>
          </div>

          <!-- 用户菜单 -->
          <div class="user-menu" @click="showUserMenu = !showUserMenu">
            <div class="user-avatar">
              <img v-if="user?.avatar" :src="user.avatar" :alt="user.username" />
              <span v-else class="avatar-placeholder">{{ user?.username?.charAt(0)?.toUpperCase() || 'U' }}</span>
            </div>
            <span class="username">{{ user?.username || '未登录' }}</span>
            <span class="dropdown-arrow">▼</span>
          </div>
        </div>
      </div>

      <!-- 用户下拉菜单 -->
      <div v-if="showUserMenu" class="user-dropdown" @click="showUserMenu = false">
        <div class="dropdown-content" @click.stop>
          <div class="user-info">
            <div class="user-avatar-large">
              <img v-if="user?.avatar" :src="user.avatar" :alt="user.username" />
              <span v-else class="avatar-placeholder-large">{{ user?.username?.charAt(0)?.toUpperCase() || 'U' }}</span>
            </div>
            <div class="user-details">
              <div class="username-large">{{ user?.username || '未登录' }}</div>
              <div class="user-email">{{ user?.email || '' }}</div>
            </div>
          </div>
          <div class="dropdown-divider"></div>
          <div class="dropdown-menu">
            <router-link to="/profile" class="dropdown-item">
              <span class="item-icon">🧑</span>
              个人资料
            </router-link>
            <router-link to="/settings" class="dropdown-item">
              <span class="item-icon">⚙️</span>
              设置
            </router-link>
            <router-link to="/billing" class="dropdown-item">
              <span class="item-icon">💳</span>
              账单管理
            </router-link>
            <div class="dropdown-divider"></div>
            <button @click="handleLogout" class="dropdown-item logout">
              <span class="item-icon">🚪</span>
              退出登录
            </button>
          </div>
        </div>
      </div>

      <!-- 通知下拉菜单 -->
      <div v-if="showNotifications" class="notifications-dropdown" @click="showNotifications = false">
        <div class="dropdown-content" @click.stop>
          <div class="dropdown-header">
            <h3>通知</h3>
            <button @click="markAllAsRead" class="mark-read-button">全部已读</button>
          </div>
          <div class="notifications-list">
            <div
              v-for="notification in notifications"
              :key="notification.id"
              :class="['notification-item', { unread: !notification.read }]"
            >
              <div class="notification-icon">{{ notification.icon }}</div>
              <div class="notification-content">
                <div class="notification-title">{{ notification.title }}</div>
                <div class="notification-message">{{ notification.message }}</div>
                <div class="notification-time">{{ formatTime(notification.time) }}</div>
              </div>
            </div>
            <div v-if="notifications.length === 0" class="no-notifications">
              暂无通知
            </div>
          </div>
        </div>
      </div>
    </header>

    <!-- 主内容区域 -->
    <main class="main-content">
      <router-view />
    </main>

    <!-- 移动端底部导航 -->
    <nav class="mobile-nav">
      <router-link
        v-for="item in mobileMenuItems"
        :key="item.name"
        :to="item.path"
        class="mobile-nav-item"
        :class="{ active: $route.path.startsWith(item.path) }"
      >
        <span class="mobile-nav-icon">{{ item.icon }}</span>
        <span class="mobile-nav-text">{{ item.label }}</span>
      </router-link>
    </nav>
  </div>
</template>

<script>
import { ref, computed, onMounted, onUnmounted } from 'vue'
import { useRouter } from 'vue-router'

export default {
  name: 'Layout',
  setup() {
    const router = useRouter()

// 响应式数据
const searchQuery = ref('')
const showUserMenu = ref(false)
const showNotifications = ref(false)

// 模拟用户数据
const user = ref({
  id: 1,
  username: 'demo_user',
  email: 'demo@example.com',
  avatar: null
})

// 主菜单项
const mainMenuItems = [
  { name: 'home', path: '/', label: '首页', icon: '🏠' }, // 房屋
  { name: 'chat', path: '/chat', label: '对话', icon: '💬' }, // 对话气泡
  { name: 'image', path: '/image', label: '绘图', icon: '🌿' }, // 叶子
  { name: 'text', path: '/text', label: '写作', icon: '🗒️' }, // 笔记本
  { name: 'music', path: '/music', label: '音乐', icon: '🎵' }, // 音符
  { name: 'video', path: '/video', label: '视频', icon: '🎥' }, // 电影机
  { name: 'map', path: '/map', label: '探索', icon: '🗺️' } // 地图
]

// 移动端菜单项（简化版）
const mobileMenuItems = [
  { name: 'home', path: '/', label: '首页', icon: '🏠' }, // 房屋
  { name: 'chat', path: '/chat', label: '对话', icon: '💬' }, // 对话气泡
  { name: 'create', path: '/create', label: '创作', icon: '✨' }, // 星星
  { name: 'library', path: '/library', label: '作品', icon: '🌾' }, // 麦穗
  { name: 'profile', path: '/profile', label: '我的', icon: '🧑' } // 人像
]

// 模拟通知数据
const notifications = ref([
  {
    id: 1,
    title: '图像创作完成',
    message: '您的"春天花园"图像已绘制完成',
    time: new Date(Date.now() - 5 * 60 * 1000),
    icon: '🌿', // 叶子
    read: false
  },
  {
    id: 2,
    title: '音乐创作任务完成',
    message: '您的古典音乐作品已渲染完成',
    time: new Date(Date.now() - 30 * 60 * 1000),
    icon: '🎵',
    read: false
  },
  {
    id: 3,
    title: '系统更新',
    message: '创意工作室已更新到v2.1',
    time: new Date(Date.now() - 2 * 60 * 60 * 1000),
    icon: '🔄',
    read: true
  }
])

// 计算未读通知数量
const unreadNotifications = computed(() => {
  return notifications.value.filter(n => !n.read).length
})

// 处理搜索
const handleSearch = () => {
  if (searchQuery.value.trim()) {
    router.push(`/search?q=${encodeURIComponent(searchQuery.value)}`)
  }
}

// 处理登出
const handleLogout = () => {
  // 清除本地存储的用户信息
  localStorage.removeItem('user')
  localStorage.removeItem('token')
  localStorage.removeItem('refresh_token')
  
  // 跳转到登录页
  router.push('/login')
}

// 标记所有通知为已读
const markAllAsRead = () => {
  notifications.value.forEach(notification => {
    notification.read = true
  })
}

// 格式化时间
const formatTime = (time) => {
  const now = new Date()
  const diff = now - time
  const minutes = Math.floor(diff / (1000 * 60))
  const hours = Math.floor(diff / (1000 * 60 * 60))
  const days = Math.floor(diff / (1000 * 60 * 60 * 24))

  if (minutes < 1) return '刚刚'
  if (minutes < 60) return `${minutes}分钟前`
  if (hours < 24) return `${hours}小时前`
  if (days < 7) return `${days}天前`
  return time.toLocaleDateString()
}

// 点击外部关闭下拉菜单
const handleClickOutside = (event) => {
  if (!event.target.closest('.user-menu')) {
    showUserMenu.value = false
  }
  if (!event.target.closest('.notification-icon')) {
    showNotifications.value = false
  }
}

onMounted(() => {
  document.addEventListener('click', handleClickOutside)
  
  // 从localStorage获取用户信息
  const storedUser = localStorage.getItem('user')
  if (storedUser) {
    user.value = JSON.parse(storedUser)
  }
})

    onUnmounted(() => {
      document.removeEventListener('click', handleClickOutside)
    })

    return {
      searchQuery,
      showUserMenu,
      showNotifications,
      user,
      mainMenuItems,
      mobileMenuItems,
      notifications,
      unreadNotifications,
      handleSearch,
      handleLogout,
      markAllAsRead,
      formatTime
    }
  }
}
</script>

<style scoped>
.layout {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: linear-gradient(135deg, #FAF8F5 0%, #f5f3f0 50%, #F0EDE8 100%);
  background-attachment: fixed;
}

/* 头部样式 */
.header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: #FAF8F5;
  border-bottom: 1px solid #A3C4BC;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  backdrop-filter: blur(10px);
}

.header-container {
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  height: 64px;
}

.header-left {
  display: flex;
  align-items: center;
}

.logo-link {
  text-decoration: none;
  color: inherit;
}

.logo {
  display: flex;
  align-items: center;
  gap: 12px;
}

.logo-icon {
  font-size: 28px;
  color: #8B7355;
  /* 人文风格滤镜 */
  filter: sepia(20%) saturate(70%) hue-rotate(15deg) brightness(1.1);
  transition: all 0.3s ease;
}

.logo-icon svg {
  /* SVG图标手绘风格 */
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 1px 2px rgba(139, 115, 85, 0.15));
}

.logo:hover .logo-icon {
  transform: scale(1.05) rotate(1deg);
  filter: sepia(30%) saturate(80%) hue-rotate(10deg) brightness(1.15);
}

.logo-text {
  font-size: 20px;
  font-weight: 700;
  color: #8B7355;
  font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* 主导航 */
.main-nav {
  flex: 1;
  display: flex;
  justify-content: center;
}

.nav-menu {
  display: flex;
  gap: 8px;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 8px;
  text-decoration: none;
  color: #6b7280;
  font-weight: 500;
  transition: all 0.2s ease;
  min-height: 44px; /* 无障碍点击区域 */
}

.nav-icon {
  font-size: 18px;
  /* 人文化滤镜处理 */
  filter: sepia(20%) saturate(65%) hue-rotate(20deg) brightness(1.05);
  transition: all 0.3s ease;
}

.nav-item:hover {
  background: rgba(163, 196, 188, 0.1);
  color: #8B7355;
  transform: translateY(-1px);
}

.nav-item:hover .nav-icon {
  transform: scale(1.08) rotate(1deg);
  filter: sepia(30%) saturate(75%) hue-rotate(15deg) brightness(1.1);
}

.nav-item.active {
  background: linear-gradient(135deg, #8B7355 0%, #A3826B 100%);
  color: white;
  box-shadow: 0 2px 8px rgba(139, 115, 85, 0.25);
}

.nav-icon {
  font-size: 16px;
}

.nav-text {
  font-size: 14px;
}

/* 头部右侧 */
.header-right {
  display: flex;
  align-items: center;
  gap: 16px;
}

.search-box {
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid #A3C4BC;
  border-radius: 12px;
  padding: 8px 12px;
  gap: 8px;
  backdrop-filter: blur(10px);
  transition: all 0.3s ease;
}

.search-box:focus-within {
  border-color: #8B7355;
  box-shadow: 0 0 0 3px rgba(139, 115, 85, 0.1);
}

.search-input {
  border: none;
  background: transparent;
  outline: none;
  font-size: 14px;
  width: 200px;
}

.search-button {
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 16px;
  color: #6b7280;
  padding: 4px;
  border-radius: 6px;
  transition: all 0.2s ease;
  min-height: 32px;
  min-width: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.search-button svg {
  /* SVG图标手绘风格 */
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 1px 2px rgba(139, 115, 85, 0.1));
}

.search-button:hover {
  background: rgba(139, 115, 85, 0.1);
  color: #8B7355;
  transform: scale(1.05);
}

.notification-icon {
  position: relative;
  cursor: pointer;
  font-size: 20px;
  color: #6b7280;
  padding: 8px;
  border-radius: 8px;
  transition: all 0.2s ease;
  min-height: 44px;
  min-width: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.notification-icon .icon svg {
  /* SVG图标手绘风格 */
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 1px 2px rgba(139, 115, 85, 0.1));
  /* 人文化滤镜 */
  filter: sepia(15%) saturate(60%) hue-rotate(20deg) brightness(1.05) drop-shadow(0 1px 2px rgba(139, 115, 85, 0.1));
}

.notification-icon:hover {
  background: rgba(163, 196, 188, 0.15);
  transform: scale(1.05) rotate(1deg);
  color: #8B7355;
}

.notification-icon:hover .icon svg {
  filter: sepia(25%) saturate(70%) hue-rotate(15deg) brightness(1.1) drop-shadow(0 2px 4px rgba(139, 115, 85, 0.15));
}

.notification-badge {
  position: absolute;
  top: 4px;
  right: 4px;
  background: #ef4444;
  color: white;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 10px;
  min-width: 16px;
  text-align: center;
}

.user-menu {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  padding: 8px 12px;
  border-radius: 8px;
  transition: background 0.2s ease;
}

.user-menu:hover {
  background: rgba(163, 196, 188, 0.15);
  border-radius: 12px;
}

.user-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #8B7355 0%, #A3826B 100%);
  color: white;
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(139, 115, 85, 0.2);
}

.user-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.username {
  font-size: 14px;
  font-weight: 500;
  color: #374151;
}

.dropdown-arrow {
  font-size: 10px;
  color: #9ca3af;
}

/* 下拉菜单 */
.user-dropdown,
.notifications-dropdown {
  position: absolute;
  top: 100%;
  right: 24px;
  z-index: 200;
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid #A3C4BC;
  border-radius: 16px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
  min-width: 280px;
  max-height: 400px;
  overflow-y: auto;
  backdrop-filter: blur(20px);
}

.dropdown-content {
  padding: 16px;
}

.user-info {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.user-avatar-large {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #3b82f6;
  color: white;
  font-weight: 600;
  font-size: 20px;
}

.user-avatar-large img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.username-large {
  font-size: 16px;
  font-weight: 600;
  color: #111827;
}

.user-email {
  font-size: 14px;
  color: #6b7280;
}

.dropdown-divider {
  height: 1px;
  background: #e5e7eb;
  margin: 12px 0;
}

.dropdown-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 8px;
  text-decoration: none;
  color: #374151;
  font-size: 14px;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
  cursor: pointer;
  transition: background 0.2s ease;
}

.dropdown-item:hover {
  background: rgba(163, 196, 188, 0.1);
  transform: translateX(4px);
}

.dropdown-item.logout {
  color: #ef4444;
}

.item-icon {
  font-size: 16px;
}

/* 通知相关 */
.dropdown-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.dropdown-header h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
}

.mark-read-button {
  background: none;
  border: none;
  color: #3b82f6;
  font-size: 12px;
  cursor: pointer;
}

.notifications-list {
  max-height: 300px;
  overflow-y: auto;
}

.notification-item {
  display: flex;
  gap: 12px;
  padding: 12px;
  border-radius: 8px;
  margin-bottom: 8px;
  transition: background 0.2s ease;
}

.notification-item.unread {
  background: rgba(163, 196, 188, 0.1);
  border-left: 3px solid #8B7355;
}

.notification-item:hover {
  background: #f3f4f6;
}

.notification-icon {
  font-size: 20px;
  flex-shrink: 0;
}

.notification-title {
  font-size: 14px;
  font-weight: 600;
  color: #111827;
  margin-bottom: 4px;
}

.notification-message {
  font-size: 13px;
  color: #6b7280;
  margin-bottom: 4px;
}

.notification-time {
  font-size: 12px;
  color: #9ca3af;
}

.no-notifications {
  text-align: center;
  color: #9ca3af;
  font-size: 14px;
  padding: 20px;
}

/* 主内容区域 */
.main-content {
  flex: 1;
  background: transparent;
  min-height: calc(100vh - 64px);
  padding: 0;
}

/* 移动端导航 */
.mobile-nav {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(250, 248, 245, 0.95);
  border-top: 1px solid #A3C4BC;
  padding: 8px 0;
  z-index: 100;
  backdrop-filter: blur(20px);
}

.mobile-nav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px;
  text-decoration: none;
  color: #6b7280;
  font-size: 12px;
  transition: color 0.2s ease;
}

.mobile-nav-item.active {
  color: #8B7355;
  transform: scale(1.1);
}

.mobile-nav-icon {
  font-size: 20px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .header-container {
    padding: 0 16px;
  }

  .main-nav {
    display: none;
  }

  .search-box {
    display: none;
  }

  .user-dropdown,
  .notifications-dropdown {
    right: 16px;
    left: 16px;
    min-width: auto;
  }

  .mobile-nav {
    display: flex;
  }

  .main-content {
    padding-bottom: 80px;
  }
}

@media (max-width: 480px) {
  .logo-text {
    display: none;
  }

  .username {
    display: none;
  }
}
</style>